<template>
  <div v-loading="true"
       :class="{ 'spin-fix': fix }"
       :style="styles"
       class="spin"
       v-bind="$attrs"
  ></div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';

const props = defineProps({
  minHeight: {
    type: Number,
    default: 120,
  },
  fix: {
    // 是否固定，需要父级有 relative 或 absolute
    type: Boolean,
    default: false,
  },
});

const styles = computed(() => {
  if (props.fix) {
    return;
  }
  return {minHeight: props.minHeight + 'px'};
});
</script>

<style lang="scss" scoped>
.spin {
  &.spin-fix {
    position: absolute !important;
    top: 0;
    left: 0;
    z-index: 8;
    width: 100%;
    height: 100%;
  }
}
</style>
